<template>
  <q-layout view="hHh lpR fFf" class="bg-grey-3">
    <q-header bordered class="bg-primary text-white">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar v-if="props.showHeaderLogo">
            <img :src="props.webHeaderLogo">
          </q-avatar>
          {{fx.packageInfo.productName}}
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-page-container>
      <div class="row justify-center q-mx-md">
        <div class="q-pa-md shadow-2 bg-white" style="width:400px; margin-top:5%">
          <router-view />
        </div>
      </div>
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
export default {
  name: 'CenterBoxLayoutWmsPda'
}
</script>

<script lang="ts" setup>

//@ts-ignore
import njtWebHeaderLogo from '@njt/foundation/assets/njt-web-header-logo.png'

const props = defineProps({
  webHeaderLogo: {
    type: String,
    default: njtWebHeaderLogo,
  },
  showHeaderLogo: {
    type: Boolean,
    default: true,
  },
})
const fx = $f

</script>

